<template>
  <div class="container">
    <el-dialog
      title="设置面食配料"
      :visible.sync="dialog.centerDialogVisible"
      @open="openData"
      @close="cancel"
      center
      width="800px"
    >
      <div class="top">
        <el-select
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          v-model="commodity"
          placeholder="请搜索选择配料"
          :remote-method="insideRemoteMethod"
          :loading="inside.loading"
        >
          <el-option
            v-for="item in inside.option"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          size="medium"
          type="primary"
          class="handleSearch"
          icon="el-icon-search"
          @click="addGoods()"
          >添加</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        max-height="500"
        style="width: 100%"
        empty-text="暂无数据"
      >
       <el-table-column
          prop="BarCode"
          label="条形码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Name"
          label="配料名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Unit"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.num"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="danger"
              @click="remove(scope)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  selectErpGoodsList,
  setMaterial,
  showMaterial,
} from "@/api/commodity/commodityList";
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";
export default {
  props: {
    dialog: Object,
  },
  data() {
    return {
      mainData: [],
      tableData: [],
      inside: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
      id: "",
      commodity: "",
    };
  },
  methods: {
    //取消
    cancel() {
      this.dialog.centerDialogVisible = false;
      this.inside = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      };
      this.commodity = "";
      this.id = "";
      this.mainData = [];
      this.tableData = [];
    },
    getDatas() {
      let data = {
        erp_goods_code: this.dialog.code,
      };
      showMaterial(data).then((res) => {
        this.id = res.data.info.id;
        res.data.info.material.forEach((res) => {
          res.Code = res.erp_goods_code;
          res.BarCode = res.goods_bar_code;
          res.Name = res.goods_name;
          res.num = res.num;
          res.Unit = res.unit;
        });
        this.tableData = res.data.info.material;
      });
    },
    getData(prop = "") {
      let data = {
        // category_code: "18,57",
        category_code: "1102,1103,1104",
        ismachining: 1,
        page: 1,
        limit: 500,
        goods_code: prop,
      };
      //获取商品
      selectErpGoodsList(data).then((res) => {
        this.mainData = res.data.paginate.data;
        this.inside.option = res.data.paginate.data.map((item) => {
          return { value: `${item.BarCode}`, label: `${item.Name}` };
        });
      });
    },
    openData() {
      this.getData();
      this.getDatas();
    },

    //删除
    remove(scope) {
      let code = scope.row.BarCode;
      this.tableData.forEach((res, index) => {
        if (res.BarCode == code) {
          this.tableData.splice(index, 1);
        }
      });
    },
    // 添加商品
    addGoods() {
      if (this.commodity) {
        let every = this.tableData.filter((res) => {
          return this.commodity == res.BarCode;
        });
        if (every.length == 0) {
          let arr = this.mainData.filter((res) => {
            return res.BarCode == this.commodity;
          });
          arr[0].num = 0;
          this.tableData.push(arr[0]);
        } else {
          this.$message({
            type: "info",
            message: "该配料已添加",
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请选择配料",
        });
      }
    },

    // 获取商品方法
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getData(query);
      } else {
        this.inside.options = [];
      }
    },
    //确定
    confirm() {
      let arr = [];
      this.tableData.forEach((res) => {
        arr.push({
          erp_goods_code: res.Code,
          goods_bar_code: res.BarCode,
          goods_name: res.Name,
          num: res.num,
          unit: res.Unit,
        });
      });
      let data = {
        id: this.id,
        erp_goods_code: this.dialog.code,
        goods_bar_code: this.dialog.goods_bar_code,
        goods_name: this.dialog.goods_name,
        unit: this.dialog.unit,
        material: JSON.stringify(arr),
      };

      setMaterial(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message,
          });
          this.$emit("upData");
          this.cancel();
        }
      });
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
}
.top {
  margin-bottom: 5px;
}
</style>